<template>
  <div class="registered-activity">
    <div class="registered-activity-list" v-for="(item,index) in activityList" :key="index" @click="toActivityDetail(item)">
      <div class="registered-activity-list-left">
        <img :src="item.activity_info.img_url">
      </div>
      <div class="registered-activity-list-right">
        <div class="activity-name">{{item.activity_info.name}}</div>
        <div class="activity-time">{{item.activity_info.start_time}}</div>
        <div class="people-num">已报名人数:{{item.join_num}}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return {
      activityList:[],
      limit: "10",
      page: "0",
      userToken: null,
    }
  },
  mounted(){
    this.reqUserJoinActivity()
  },
  //下拉刷新
  onPullDownRefresh () {
    this.reqUserJoinActivity()
  },
  methods:{
    async reqUserJoinActivity(){
      this.userToken = wx.getStorageSync('userToken');
      let params = {
        user_token: this.userToken,
        limit: this.limit,
        page: this.page,
      }
      let res = await this.$api.getUserJoinActivity(params);
      wx.stopPullDownRefresh()
      if(res.data.level == "success"){
        this.activityList = res.data.data;
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    toActivityDetail(item){
      //跳转详情
      this.$currency.navigateTo(`/pages/activityMain/activityDetails/main?id=${item.activity_id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .registered-activity{
    margin-top: 20rpx;
    padding: 0 20rpx;
    .registered-activity-list{
      display: flex;
      font-size: 28rpx;
      margin-bottom: 30rpx;
      .registered-activity-list-left{
        flex: 1;
        height: 150rpx;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .registered-activity-list-right{
        flex: 2;
        padding-left: 20rpx;
        div{
          height: 50rpx;
          line-height: 50rpx;
        }
      }
    }
  }
</style>